import React, {useEffect, useState} from "react";
import {Row, Col, Card, Progress, Table} from "antd";
import {IPageResponse, IParam, PageInfo} from "@/common/common";
import {Spin} from "antd";
import './index.scss'
import {Line} from "@/components/echarts";
import {ColumnsType} from "antd/lib/table";
import {getVisitorList} from "@/common/apis";

const strokeColor = {
  "0%": "#108ee9",
  "100%": "#87d068",
};

const opt: any = {
  xAxis: {
    type: "category",
    boundaryGap: false,
    show: false,
  },
  yAxis: {
    show: false,
  },
  tooltip: {},
  grid: {
    height: "100%",
    left: "1%",
    right: "1%",
    bottom: "0%",
    top: "0%",
  },
  series: [
    {
      name: "visitor",
      type: "line",
      itemStyle: {
        color: "#975fe4",
      },
      lineStyle: {
        type: "solid",
      },
      data: [],
      smooth: true,
      symbol: "none", //取消折点圆圈
      areaStyle: {
        color: "#975fe4",
      },
    },
  ],
}

function getPercentage(up: number, down: number) {
  if (!down) return 0;
  return Number(((up / down) * 100).toFixed(2));
}

const getTableTitle = () => {
  return (
    <Row justify="space-between" align="middle" gutter={80}>
      <Col style={{lineHeight: "32px"}}>访问统计</Col>
    </Row>
  );
};

const columns: ColumnsType<any> = [
  {
    title: "登陆ip",
    key: "ipAddress",
    dataIndex: "ipAddress",
    align: "center",
    width: 150,
  },
  {
    title: "操作类型",
    dataIndex: "type",
    key: "type",
    align: "center",
    render: (text: any, record: any) => {
      return text;
    },
  },
  {
    title: "操作内容",
    dataIndex: "content",
    key: "content",
    // width: 500,
    align: "center",
    ellipsis: true,
  },
  {
    title: "操作时间",
    dataIndex: "createAt",
    align: "center",
    key: "createAt",
  }
]

const Vistor: React.FC<any> = () => {

  const [loading, setLoading] = useState<boolean>(false);
  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    getVisitorList({}).then((res) => {
      console.log(res)
    })
  }, [params]);

  const onChangePage = (page: PageInfo) => {
    setParams({...params, ...page})
  }

  const vOpt = {...opt}
  vOpt.xAxis.data = ["2022-01-01", "2022-01-02", "2022-01-03", "2022-01-04"]
  vOpt.series[0].data = [9, 2, 4]

  return (
    <div className="vistor-container">
      <Spin spinning={loading}>
        <Row gutter={[20, 20]}>
          <Col span={6}>
            <Card className="cards">
              <p className="title">访问量</p>
              <p className="num">
                {100}
              </p>
              <div className="echart">
                <Line option={vOpt} style={{height: 50}}/>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="cards">
              <p className="title">处理次数</p>
              <p className="num">
                {200}
              </p>
              <div className="echart">
                <Line option={opt} style={{height: 50}}/>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="cards">
              <p className="title">今日访问</p>
              <p className="num">{99}</p>
              <div>
                <p>占全部：</p>
                <Progress
                  strokeColor={strokeColor}
                  percent={getPercentage(99, 100)}
                />
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="cards">
              <p className="title">今日处理</p>
              <p className="num">{99}</p>
              <div>
                <p>占全部：</p>
                <Progress
                  strokeColor={strokeColor}
                  percent={getPercentage(99, 100)}
                />
              </div>
            </Card>
          </Col>
        </Row>
        <Table
          title={getTableTitle}
          rowKey={"id"}
          columns={columns}
          dataSource={pageResponse.data || []}
          pagination={{
            current: pageResponse.pageInfo.page || 0,
            pageSize: pageResponse.pageInfo.size || 10,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ["5", "10", "15", "20"],
            total: pageResponse.pageInfo.total || 0,
            showTotal: (total) => `共 ${total} 条`,
            onChange: (pageNo, pageSize) => {
              onChangePage({page: pageNo, size: pageSize})
            }
          }}
        />
      </Spin>
    </div>
  );
}

export default Vistor
